<template>
    <!-- 通用 dialog  -->
    <el-dialog
    :append-to-body='true'
    :title="dialogTitle"
    :visible.sync="isshowDialogs"
    :width="dialogWidth"
    :show-close='false'
    :close-on-click-modal='false'
    :top='topHeight'
    @close='closedialog'
    :destroy-on-close='false'
    >
    <!-- 关闭按钮 -->
    <i class="iconfont closeicon" @click='closepassword'>&#xe6ce;</i>
    <div class="Dialogcontent">
        <slot></slot>
    </div>
    <span slot="footer" class="dialog-footer" v-if="isshowFooter">
         <el-button  @click="closepassword" size="medium">取 消</el-button>
        <el-button type="primary" @click="confirmbtn" size="medium">确 定</el-button>
    </span>
    </el-dialog>
</template>

<script>
import {getAccessToken} from '@/utils/accessToken'
import {getCOption,getOption,forgetpassword} from '@/api/common'
export default {
    data(){
        return{

        }
    },
    props:{
        dialogTitle:{
            type:String,
            default:'标题',
            required:true
        },
        //是否显示弹窗
        isshowDialogs:{
            type:Boolean,
            default:false,
            required:true
        },
        //弹窗的宽度
        dialogWidth:{
            type:String,
            default:'45%'
        },
        //高度
        topHeight:{
            type:String,
            default:'15vh'
        },
        //是否显示底部按钮区域
        isshowFooter:{
            type:Boolean,
            default:true
        }
    },
    methods:{
        //关闭弹窗的回调
        closedialog(){
            this.$emit('closetextDialog')
        },
        //关闭弹窗
        closepassword(){
            this.$emit('closetextDialog')
        },
        //确认提交按钮
        confirmbtn(){
            this.$emit('confirmbtn')
        }
    }    
}
</script>

<style scoped lang='scss'>
.closeicon{
    position: absolute;
    right: 20px;
    top: 15px;
    cursor: pointer;
    font-size: 24px;
    color: hsla(0,0%,40%,.6784313725490196);
    &:hover{
        color: $base-color-default;
    }
}
.dataList{
    span{
        font-size: 18px;
        font-weight: bold;
        &:nth-child(2){
            margin: 0 5px;
            color: #ff7850;
            font-size: 19px;
        }
    }
}
.entertitle{
    text-align: center;
    h3{
        font-size: 24px;
        color: #333;
        margin: 10px 0;
    }
    p{
        font-size: 15px;
        line-height: 24px;
        color: rgba(0,0,0,.65);
    }
}
</style>